<template>
  <div class="subjects-container">
    <div class="app-container">
      <!-- 表头 -->
      <el-form :inline="true" size="small" class="demo-form-inline">
        <!-- 搜索框 -->
        <el-form-item label="学科名称">
          <el-input v-model="subjectName"></el-input>
        </el-form-item>
        <!-- 清除和搜索按钮 -->
        <el-form-item>
          <el-button @click="subjectName = ''">清除</el-button>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
        <!-- 新增学科按钮 -->
        <el-button
          class="btn_right"
          size="small"
          type="success"
          icon="el-icon-edit"
          @click="dialogFormVisible = true"
          >新增学科</el-button
        >
      </el-form>
      <!-- 消息提示 -->
      <el-alert
        :title="'数据一共 ' + page.counts + ' 条'"
        show-icon
        type="info"
        :closable="false"
        style="margin-bottom: 15px"
      >
      </el-alert>
      <!-- 表格数据 -->
      <el-table :data="subjectList" style="width: 100%">
        <el-table-column type="index" label="序号" width="48">
        </el-table-column>
        <el-table-column prop="subjectName" label="学科名称" width="170">
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="170">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="160">
          <template slot-scope="{ row }">{{
              row.addDate.replace(/T|.000Z/g, ' ')
            }}</template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示" width="170">
          <template slot-scope="{ row }">
            {{ row.isFrontDisplay == 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录" width="170">
        </el-table-column>
        <el-table-column prop="tags" label="标签" width="170">
        </el-table-column>
        <el-table-column prop="totals" label="题目数量" width="170">
        </el-table-column>
        <el-table-column prop="name" label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              size="medium"
              @click="$router.push(`/subjects/directorys`)"
              >学科分类</el-button
            >
            <el-button
              type="text"
              size="medium"
              @click="$router.push(`/subjects/tags`)"
              >学科标签</el-button
            >
            <el-button type="text" @click="alter(row)" size="medium"
              >修改</el-button
            >
            <el-button type="text" @click="delAfter(row.id)" size="medium"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="changePage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="page.pagesize"
          :current-page="page.page"
          layout="prev, pager, next,sizes,jumper"
          :total="page.counts"
          style="margin-top: 20px; text-align: right"
        >
        </el-pagination>
      </div>
      <!-- 新增编辑弹框 -->
      <el-dialog title="新增学科" width="23%" :visible.sync="dialogFormVisible">
        <el-form
          :model="ruleForm"
          :rules="rules"
          class="demo-ruleForm"
          label-width="80px"
          ref="ruleForm"
        >
          <!-- 学科名称 -->
          <el-form-item label="学科名称" prop="subjectName">
            <el-input
              v-model="ruleForm.subjectName"
              placeholder="请输入学科名称"
            ></el-input>
          </el-form-item>
          <!-- 是否显示 -->
          <el-form-item label="是否显示">
            <el-switch
              v-model="ruleForm.isFrontDisplay"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="btnCancel">取 消</el-button>
          <el-button type="primary" @click="btnOK">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 删除弹框 -->
      <el-dialog title="提示" :visible.sync="centerDialogVisible" width="25%">
        <span
          ><i class="el-icon-warning"></i>
          此操作将永久删除该学科，是否继续</span
        >
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="del(ruleForm.id)">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { list, add, remove, update } from '@/api/hmmm/subjects'
// import { parseTime } from '@/filters'
export default {
  data () {
    return {
      subjectName: '', // 搜索框内容
      subjectList: [], // 内容数组
      page: {
        page: 1, // 当前页码
        pagesize: 10, // 请求条数
        counts: null, // 总数
        pages: null
      },
      dialogFormVisible: false, // 弹出框
      centerDialogVisible: false, // 删除弹出框
      // 弹出框填入信息
      ruleForm: {
        id: null,
        subjectName: null,
        isFrontDisplay: true
      },
      // 表单验证
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getsubjectList()
  },
  methods: {
    // 输入页码改变时
    changePage (newPage) {
      this.page.page = newPage
      this.getsubjectList()
    },
    // 改变请求条数
    handleSizeChange (val) {
      this.page.pagesize = val
      this.getsubjectList()
    },
    // 搜索
    onSubmit () {
      if (this.subjectName) {
        this.subjectList = this.subjectList.filter(value => {
          return value.subjectName.indexOf(this.subjectName) !== -1
        })
        this.page.counts = this.subjectList.length
      } else {
        this.getsubjectList()
      }
    },
    // 获取列表数据
    async getsubjectList () {
      const dataList = await list(this.page)
      this.subjectList = dataList.data.items// 获取渲染数据
      this.page.counts = dataList.data.counts// 获取列表总数
      // console.log(dataList)
    },
    // 修改
    alter (val) {
      // console.log(val)
      this.dialogFormVisible = true
      this.ruleForm = val
      // console.log(this.ruleForm)
    },
    // 确定
    async btnOK () {
      if (this.ruleForm.id == null) {
        try {
          console.log(this.ruleForm)
          this.$refs.ruleForm.validate()
          await add(this.ruleForm)
          this.$message.success('新增成功')
          this.dialogFormVisible = false// 关闭弹框
          this.ruleForm.subjectName = ''// 清空输入框
          this.getsubjectList()
        } catch (error) {
          console.log(error)
        }
      } else {
        try {
          this.$refs.ruleForm.validate()
          await update(this.ruleForm)
          this.$message.success('编辑成功')
          this.ruleForm.id = null// 恢复ID
          this.dialogFormVisible = false// 关闭弹框
          this.ruleForm.subjectName = ''// 清空输入框
          this.getsubjectList()
        } catch (error) {
          console.log(error)
        }
      }
    },
    // 取消
    btnCancel () {
      this.ruleForm.subjectName = ''// 清空输入框
      this.dialogFormVisible = false// 关闭弹框
    },
    // 删除
    delAfter (id) {
      this.centerDialogVisible = true
      this.ruleForm.id = id
    },
    async del (id) {
      try {
        // await this.$confirm('此确定将永久删除学科，是否继续？')
        await remove({ id })
        this.centerDialogVisible = false
        // console.log(id)
        this.getsubjectList()
        this.$message.success('删除学科成功')
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.subjects-container {
  background-color: #fff;
  margin:10px ;
}
.btn_right {
  float: right;
}
.el-button {
  cursor: pointer;
}
.el-icon-warning {
  color: #e6a23c;
  font-size: 20px;
}
</style>
